import React, {Component} from "react";
import PropTypes from 'prop-types';

class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.handleDelete = this.handleDelete.bind(this);
    }

    render() {
        console.log('TodoItem render')
        const {context, test} = this.props
        /**
         * JSX -> createElement->  虚拟DOM（JS 对象） ->真实的DOM
         * react底层其实会把JSX语法通过createElement变成JS对象  ，然后再转化成虚拟DOM
         * React.createElement 是一个更偏向于底层的一个接口，实际上提供了类似于JS对象的一个东西，
         * 即使没有react语法，我们也能写react代码
         * <div onClick={this.handleDelete}>{test}-{context}</div>
         */
        // return React.createElement('div', {id: 'test'}, React.createElement('span', {}, 'item'));
        return <div onClick={this.handleDelete}>{test}-{context}</div>
    }

    /**
     * 1.当一个组件要从父组件接受了参数
     * 2.只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
     * （如果这个组件第一次存在于父组件中，不会执行，如果这个组件之前已经存在于父组件，才会执行）
     * @constructor
     */
    UNSAFE_componentWillReceiveProps() {
        console.log('child componentWillReceiveProps')
    }

    /**
     * 当这个组件即将被页面中剔除的时候会被执行
     */
    componentWillUnmount() {
        console.log('child componentWillUnmount')
    }

    handleDelete() {
        const {handleDeleteItem, index} = this.props;
        handleDeleteItem(index);
    }
}

/**
 * TodoList并没接受任何的props，也就是说，它是一个顶层组件，它没有父组件，也就没有接受到任何父组件传递过来的props参数，因此，没有props参数的时候，这个生命周期函数
 * 是不会被执行的
 * @param nextProps
 * @param nextContext
 */

//对TodoItem做属性的校验
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,//如果设置了isRequired，代表test必须是一个string类型，而且必须要传值，如果不传递会报警告。
    //这里的 PropTypes 要和上面引入的propTypes一摸一样，不然会报错
    context: PropTypes.string,
    handleDeleteItem: PropTypes.func,
    index: PropTypes.number
};
/**
 * 对TodoItem的属性设置默认属性
 * TodoItem 要求父组件传递属性给自己，假设没传的时候给属性一个默认值，这个时候即使父组件没有向子组件传递值，也没关系了
 */
TodoItem.defaultProps = {
    test: 'Hello World'

}

export default TodoItem;